<template>
  <scroll-view>
    <ul v-if="dataList.length" class="data-list">
      <li v-for="(item, index) in dataList" :key="index" class="data-list__item">
        <a href="javascript:;" class="data-list__a" @click="onItemClick(item)">
          <div class="data-list__icon">
            <img :src="item.faceImage" alt="" />
          </div>
          <div class="data-list__info">
            <p class="data-list__info-userName">{{ item.name }}</p>
            <p class="data-list__info-className">{{ item.className }}</p>
          </div>
        </a>
      </li>
    </ul>
    <empty-data v-else />
  </scroll-view>
</template>
<script>
  import { EmptyData } from '@components';
  export default {
    components: { EmptyData },
    props: {
      // 列表数据
      dataList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {};
    },
    mounted() {},
    methods: {
      // 列表项点击
      onItemClick(item) {
        this.$emit('on-item-click', item);
      }
    }
  };
</script>

<style scoped lang="less">
  @import '~@styles/var';
  @import '~@styles/modules/visitor/data-list-after';
  .data-list {
    --item-height: 110px;
    --img-size: 70px;

    width: 100%;
    padding: 15px 20px;
    &__item {
      width: 100%;
      height: var(--item-height);
      margin-bottom: 18px;
      background: rgb(230, 229, 229);
      border-radius: 8px;
    }
    &__a {
      display: flex;
      display: -webkit-flex;
      flex-direction: row;
      width: 100%;
      height: var(--item-height);
      padding: 0;
    }

    &__icon {
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 40%;
      height: var(--item-height);

      img {
        width: var(--img-size);
        height: var(--img-size);
        clip-path: circle(50% at 50% 50%);
      }
    }

    &__info {
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      align-items: left;
      justify-content: center;
      width: 60%;
      height: var(--item-height);

      p {
        padding: 0;
        margin: 0;
      }

      &-userName {
        margin-bottom: 15px !important;
        font-size: 18px;
        font-weight: bold;
      }

      &-className {
        font-size: 14px;
      }
    }
  }
</style>
